<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  
  <script type="module">
    import { reactive, effect } from './reactivity/index.js'

    const jobQueue = new Set()
    const p = Promise.resolve()

    let isFlushing = false
    function flushJob() {
      if (isFlushing) return

      isFlushing = true
      p.then(() => {
        jobQueue.forEach(job => job())
      }).finally(() => {
        isFlushing = false
      })
    }

    const data = {
      ok: true,
      text: 'hello vue',
      foo: 0,
    }
    const obj = reactive(data)
    const app = document.querySelector('#app')
    effect(() => {
      console.log(obj.foo, 'kk')
      // obj.ok = false
      console.log('updated')
      app.innerHTML = obj.ok ? obj.text : 'not'
    }, {
      scheduler (fn) {
        // setTimeout(fn)
        jobQueue.add(fn)
        flushJob()
      }
    })
    // obj.text = 'i'

    effect(() => {
      console.log(obj.foo, 'foo')
    })

    obj.foo++
    obj.foo++
    
    console.log('end')

  </script>
</body>
</html>